$spinner-huge-size: 100px;
$spinner-large-size: 60px;
$spinner-medium-size: 40px;
$spinner-small-size: 16px;
$spinner-icon-margin: 10px;

@keyframes t128-pulse {
  0% {
    opacity: 0.05;
    transform: scale(1);
  }

  50% {
    opacity: 0.3;
  }

  100% {
    opacity: 0;
    transform: scale(1.7);
  }
}

.ui-128__spinner {
  position: relative;
  width: $spinner-medium-size;
  height: $spinner-medium-size;

  .ui-128__spinner-icon {
    position: absolute;
    z-index: 2;
    top: 50%;
    transform: translate(1%, -50%) scale(0.65);
  }

  .ui-128__spinner-pulse-outer,
  .ui-128__spinner-pulse-inner {
    content: '';
    position: absolute;
    z-index: 0;
    top: 0;
    left: 0;
    border-radius: 50%;
    height: $spinner-medium-size;
    width: $spinner-medium-size;
  }

  .ui-128__spinner-pulse-outer {
    animation: t128-pulse 1.5s Infinite;
  }

  .ui-128__spinner-pulse-inner {
    animation: t128-pulse 1.5s Infinite 0.4s;
  }

  .ui-128__spinner-icon-outer {
    position: absolute;
    border-radius: 50%;
    z-index: 1;
    height: $spinner-medium-size;
    width: $spinner-medium-size;
    box-shadow: 1px 0 5px 0 rgba(0, 0, 0, 0.2);
    box-sizing: border-box;
  }
}

.ui-128__spinner.ui-128__spinner--small {
  width: $spinner-small-size;
  height: $spinner-small-size;

  .ui-128__spinner-icon {
    display: none;
  }

  .ui-128__spinner-pulse-outer,
  .ui-128__spinner-pulse-inner {
    height: $spinner-small-size;
    width: $spinner-small-size;
  }

  .ui-128__spinner-icon-outer {
    height: $spinner-small-size;
    width: $spinner-small-size;
    box-shadow: 1px 0 3px 0 rgba(0, 0, 0, 0.2);
  }
}

.ui-128__spinner.ui-128__spinner--large {
  width: $spinner-large-size;
  height: $spinner-large-size;

  .ui-128__spinner-pulse-outer,
  .ui-128__spinner-pulse-inner {
    height: $spinner-large-size;
    width: $spinner-large-size;
  }

  .ui-128__spinner-icon-outer {
    height: $spinner-large-size;
    width: $spinner-large-size;
  }
}

.ui-128__spinner.ui-128__spinner--huge {
  width: $spinner-huge-size;
  height: $spinner-huge-size;

  .ui-128__spinner-pulse-outer,
  .ui-128__spinner-pulse-inner {
    height: $spinner-huge-size;
    width: $spinner-huge-size;
  }

  .ui-128__spinner-icon-outer {
    height: $spinner-huge-size;
    width: $spinner-huge-size;
    box-shadow: 1px 0 10px 0 rgba(0, 0, 0, 0.2);
  }
}
